<template>
	<view class="mainPage" style="padding-top: 0">
		<view class="tab bg-white padding-sm margin-bottom padding-tb">
			<view @click="toChangeTab(index)" :class="tabIndex==index?'themeColor text-bold':''" v-for="(item,index) in tabList" :key="index">{{item.name}}</view>
		</view>
		<view class="padding list">
			<view class="item bg-white radius-lg padding-sm margin-bottom" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view>
						<text class="text-sm">订单编号：{{item.order_no}}</text>
					</view>
					<view class="text-sm">
						<text class="text-right" :class="'text-'+item.statusText.color">{{item.statusText.value  }}</text>
					</view>
				</view>
				<view class="project padding-tb-sm" v-for="(items,indexs) in item.orderDetails" :key="indexs">
					<image :src="items.good.image" mode="aspectFill" class="image"></image>
					<view class="proBox padding-left-sm">
						<view class="nameandtime">
							<view class="name text-bold text-black">{{items.good.name}}</view>
							<view class="time text-gray text-sm">{{items.good.duration}}分钟</view>
						</view>
						<view class="desc text-sm text-gray margin-bottom-sm">
							{{items.good.desc || ''}}
						</view>
						<view class="cost">
							<view class="text-red text-bold">￥{{ items.staff_price }}</view>
							<view class="num text-gray">x{{items.count}}</view>
						</view>
					</view>
				</view>

				<view class="orderinfo padding-xs text-sm">
          <view class="crow margin-bottom-sm">
            <view class="name">下单时间</view>
            <view class="content">
              <text>{{item.create_time}}</text>
            </view>
          </view>
<!--          <view class="crow margin-bottom-sm">-->
<!--            <view class="name">服务客服</view>-->
<!--            <view class="content">-->
<!--              <view class="cu-avatar sm round margin-left" :style="{backgroundImage: 'url('+item.staff.avatar+')'}"></view>-->
<!--              <text class="padding-left-xs">{{item.staff.nickname}}</text>-->
<!--            </view>-->
<!--          </view>-->
          <view class="crow margin-bottom-sm">
            <view class="name">预约时间</view>
            <view class="content">
              <text>{{item.start_time}}</text>
            </view>
          </view>
					<view class="crow margin-bottom-sm">
						<view class="name">客户备注</view>
						<view class="content">
							<text>{{item.remark}}</text>
						</view>
					</view>
<!--          <view class="crow padding-bottom-sm">-->
<!--            <view class="name">-->
<!--              <text>车费：</text>-->
<!--            </view>-->
<!--            <div class="content">-->
<!--              <text class="text-red text-bold">¥ {{item.travel_mode_fee}}</text>-->
<!--            </div>-->
<!--          </view>-->
          <view class="crow padding-bottom-sm solid-bottom">
            <view class="name">
              <text>到手金额：</text>
            </view>
            <div class="content">
              <text class="text-red text-bold">¥ {{ getAmount(item)}}</text>
            </div>
          </view>
					<view class="crow padding-top-sm">
						<view class="name"></view>
						<view class="content">
              <button class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click="toUrl('/pages/order/detail?orderId='+item.id)" >订单详情</button>
              <button v-if="item.buttonShow.get" class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click.stop="toget(item,1)">立即接单</button>
              <button v-if="item.buttonShow.arrive" class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click.stop="toget(item,2)">已到达</button>
              <button v-if="item.buttonShow.waitServe" class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click.stop="toget(item,3)">开始服务</button>
              <button v-if="item.buttonShow.finish" class="cu-btn china-btn-bg round margin-left-xs" style="margin-right: 5px" @click.stop="toget(item,4)">已完成</button>
						</view>
					</view>
				</view>
			</view>
      <EmptyData v-if="list.length === 0" type="notOrder"></EmptyData>
    </view>

		<!-- 订单取消 -->
		<view class="cu-modal" :class="cancelShow?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-sm bg-white">确定要取消订单吗？</view>
				<view class="grid col-2 padding bg-white">
					<view class="solid-right" @tap="hideCancelShow('cancel')">取消</view>
					<view class="themeColor" @tap="hideCancelShow('confirm')">确定</view>
				</view>
			</view>
		</view>
    <view class="cu-modal" :class="backShow?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">提示</view>
        </view>
        <view class="padding-sm bg-white">确定要退款订单吗？</view>
        <view class="grid col-2 padding bg-white">
          <view class="solid-right" @tap="hideBackShow('cancel')">取消</view>
          <view class="themeColor" @tap="hideBackShow('confirm')">确定</view>
        </view>
      </view>
    </view>
		<!-- 订单删除 -->
		<view class="cu-modal" :class="deleteShow?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-sm bg-white">确定要删除此订单吗？</view>
				<view class="grid col-2 padding bg-white">
					<view class="solid-right" @tap="hideDeleteShow('cancel')">取消</view>
					<view class="themeColor" @tap="hideDeleteShow('confirm')">确定</view>
				</view>
			</view>
		</view>

    <payType
        :show="payTypeShow"
        :orderData="orderData"
        @payCallBack="payCallBack"
        source='order'/>
    <Loading v-if="pageLoading"/>
	</view>
</template>

<script>
import payType from '@/components/payType/payType.vue'; // 服务时间
import EmptyData from "../../components/emptyData/emptyData.vue";
	export default {
		components:{payType, EmptyData},
		data() {
			return {
				pageLoading:false,
				tabIndex:0,
				tabList:[
          {name:'待服务',id:'get'},
					{name:'服务中',id:'serve'},
          {name:'已完成',id:'finish'},
          {name:'待支付',id:'pay'},
          {name:'退款中',id:'refund'},
				],
				current_page:1,
				list: [],
				cancelShow:false,
				deleteShow:false,
        backShow: false,
				addOrderShow:false,
				cancelItem:{},
				deleteItem:{},
        backItem: {},
        payTypeShow: false,
        orderData: {},
        userInfo: {}
			};
		},
		onShow() {
      this.getMyInfo();
		},
		methods:{
      getPrice(price) {
        let settlement_ratio = this.userInfo.settlement_ratio || 100
        let _settlement_ratio = settlement_ratio / 100
        return (price * _settlement_ratio).toFixed(2)
      },
      getMyInfo() {
        let userInfo = uni.getStorageSync('userInfo') || {}
        if (userInfo.id) {
          this.$http.getTechnicianDetail({
            id: userInfo.id
          }).then(res => {
            uni.setStorageSync('userInfo', res);
            this.userInfo = res;
            this.getOrderList()
          }).catch(err => {
            uni.redirectTo({
              url: '/pages/login/login'
            })
          })
        }
      },
      getOrderList() {
        this.pageLoading = true;
        this.$http.getOrderList({
          status: this.tabList[this.tabIndex].id,
          staff_id: uni.getStorageSync('userInfo').id,
        }).then(res => {
          this.pageLoading = false;
          this.list = res.map(item => {
            item.buttonShow = {
             // 接单
              get: false,
              // 到达
              arrive: false,
              // 带开始服务
              waitServe: false,
              // 完成
              finish: false,
            }
            item.statusText = {
              color: '',
              value: '',
            }
            // 设置状态
            if (item.pay_status === 0) {
              if (item.order_status === 0) {
                item.statusText = {
                  color: 'orange',
                  value: '待支付',
                }
                item.buttonShow.pay = true
                item.buttonShow.cancel = true
              } else if (item.order_status === -1) {
                item.statusText = {
                  color: 'grey',
                  value: '已取消',
                }
                item.buttonShow.delete = true
              }
            } else if (item.pay_status === 1) {
              if (item.order_status === 0) {
                item.statusText = {
                  color: 'orange',
                  value: '待接单',
                }
                item.buttonShow.get = true
              } else if (item.order_status === 1) {
                item.statusText = {
                  color: 'orange',
                  value: '已接单',
                }
                item.buttonShow.arrive = true
              } else if (item.order_status === 2) {
                item.statusText = {
                  color: 'orange',
                  value: '已接单',
                }
                item.buttonShow.waitServe = true
              } else if (item.order_status === 3) {
                item.statusText = {
                  color: 'orange',
                  value: '服务中',
                }
                item.buttonShow.finish = true
              } else if (item.order_status === 4) {
                item.statusText = {
                  color: 'green',
                  value: '已完成',
                }
              }
            }
             else if (item.pay_status === 2) {
               item.statusText = {
                 color: 'orange',
                 value: '退款中',
               }
             } else if (item.pay_status === 3) {
               item.statusText = {
                 color: 'orange',
                 value: '退款中',
               }
             } else if (item.pay_status === 4) {
               item.statusText = {
                 color: 'green',
                 value: '退款成功',
               }
             } else if (item.pay_status === 5) {
               item.statusText = {
                 color: 'green',
                 value: '取消退款',
               }
               item.buttonShow.refund = true
             }
            return {
              ...item,
            }
          });
          uni.stopPullDownRefresh();
        })
      },
			hideCancelShow(type){
				if(type == 'confirm'){
          this.pageLoading = true;
				  this.$http.updateOrder({
            id: this.cancelItem.id,
            order_status: -1,
          }).then(res => {
            this.getOrderList()
          }).finally(() => {
            this.pageLoading = false;
          })
				}
				this.cancelShow = false;
				this.cancelItem = {};
			},
			hideDeleteShow(type){
        if(type == 'confirm'){
          this.pageLoading = true;
          this.$http.deleteOrder({
            id: this.deleteItem.id,
          }).then(res => {
            this.getOrderList()
          }).finally(() => {
            this.pageLoading = false;
          })
        }
				this.deleteShow = false;
				this.deleteItem = {};
			},
			toChangeTab(index){
				this.tabIndex = index;
				this.resetGetList();
        this.getOrderList()
			},
			toDel(item){
				this.deleteItem = item;
				this.deleteShow = true;
			},
			resetGetList(){
				this.current_page = 1;
				this.pageLoading = true;
			},
			toCancel(item){
				this.cancelItem = item;
				this.cancelShow = true;
			},
      topay(item){
        this.orderData = item;
        this.payTypeShow = true;
      },
      payCallBack(){
        uni.showLoading({
          title: '请等待'
        })
        let that = this
        this.$http.payment({
          order_no: that.orderData.order_no,
          member_id: that.orderData.member_id,
          pay_amount: that.amount,
          body: '服务订单'
        }).then(res => {
          wx.requestPayment({
            timeStamp: res.timestamp,
            nonceStr: res.nonce_str,
            package: res.package,
            signType: res.signType,
            paySign: res.paySign,
            success () {
              that.$http.updateOrderPayStatus({
                order_no: that.orderData.order_no,
              }).then(res2 => {
                uni.showToast({
                  title: '支付成功',
                  icon: 'success'
                })
                that.payTypeShow = false
                that.getOrderList()
              })
            },
            fail (res) {
              console.log('pay fail', res)
            }
          })
        })
      },

			addOrderPopup(e){
				this.addOrderShow = false;
			},
      toget(item, status) {
        this.pageLoading = true;
        this.$http.updateOrder({
          id: item.id,
          order_status: status,
        }).then(res => {
          this.getOrderList()
        }).finally(() => {
          this.pageLoading = false;
        })
      },
      getAmount(item) {
        return (parseFloat(item.staff_amount) + parseFloat(item.travel_mode_fee)).toFixed(2)
      }
		},
    // 下拉刷新
    onPullDownRefresh() {
      this.getOrderList();
    },
	}
</script>

<style lang="less" scoped>
.tab{
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	width: 100%;
	z-index: 9999;
}
.list{
	padding-top: 110rpx;
}
.item{
	.top{
		display: flex;
		justify-content: space-between;
	}
	.project{
		display: flex;
		.image{
			width: 130upx;
			height: 130upx;
			border-radius: 20upx;
		}
		.proBox{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.nameandtime,.cost{
				display: flex;
				justify-content: space-between;
			}
		}
	}
}
.orderinfo{
	.crow{
		justify-content:space-between
	}
}
</style>
